<template>
    <div class="survey container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">开票管理</h1>
                </el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
            <el-row class="export-container">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addNewData">新增</el-button>
                <el-button type="primary" icon="el-icon-download" size="mini" @click="exporting">导出</el-button>
            </el-row>
            <el-table ref="customerTable" :data="tableData" stripe style="width: 100%">
                <!-- @selection-change="handleSelectionChange" -->
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="supplierId" label="供应商id"></el-table-column>
                <el-table-column prop="invoicingCompany" label="开票公司名称"></el-table-column>
                <el-table-column prop="openingBank" label="开户银行"></el-table-column>
                <el-table-column prop="openingName" label="开户名称"></el-table-column>
                <el-table-column prop="openingAddress" label="开户地址">
                </el-table-column>
                <el-table-column
                    prop="taxpayerIdNum"
                    label="纳税人识别号"
                ></el-table-column>
                <el-table-column
                    prop="uninvoicedAmount"
                    label="期初未开票金额"
                ></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                icon="el-icon-more"
                                size="small"
                                @click="handleDetail(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                size="small"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                size="small"
                                @click="handleDelete(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>
<script>
import { getInvoiceList, deleteInvoiceList } from '@/api/system/contract'

export default {
    data() {
        return {
            searchValue: '',
            total: 0,
            tableData: []
        }
    },
    methods: {
        addNewData() {
        },
        exporting() {
        },
        // 获取列表请求
        getData() {
            getInvoiceList().then((res) => {
                if (res.code === 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        },
        // 删除事件
        handleDelete(index, row) {
            this.$confirm('请确定要删除所选的记录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteInvoiceList(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },
        //新增按钮
        addNewData() {
            this.$router.push({ path: '/Contract/AddInvoicing' })
        },
        //编辑按钮
        handleEdit(index, row) {
            // let data = JSON.stringify(row);
            this.$router.push({
                path: '/Contract/EditInvoicing',
                query: { id: row.id }
            })
        },
        // 详情按钮
        handleDetail(index, row) {
            this.$router.push({
                path: '/Contract/DetailInvoicing',
                query: { id: row.id }
            })
        }
    },
    created() {
        this.getData()
    }
}
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}

.export-container {
    margin: 15px 0;
}

.pagination {
    margin-top: 10px;
}
</style>
